Page({
  data: {
    // 用于**显示**在页面上的列表，会随着搜索而改变
    categories: [],
    // 用于绑定搜索框的输入内容
    searchQuery: '',
  },

  // 用于存储从服务器获取的、未经筛选的完整品类列表
  allCategories: [],

  onLoad: function (options) {
    this.getCategories();
  },

  /**
   * 从服务器获取品类列表
   */
  getCategories: function () {
    const that = this;
    wx.showLoading({
      title: '加载中...',
    });

    wx.request({
      url: 'http://43.142.120.23:5000/api/categories', // ！！！请确保这里的地址正确
      method: 'GET',
      success: function (res) {
        if (res.statusCode === 200 && res.data && Array.isArray(res.data.data)) {
          const fetchedCategories = res.data.data;
          
          // 【核心改动】将获取到的完整数据存储到备份数组中
          that.allCategories = fetchedCategories;
          
          // 同时更新页面上显示的列表
          that.setData({
            categories: fetchedCategories
          });
        } else {
          wx.showToast({ title: '数据格式错误', icon: 'none' });
        }
      },
      fail: function () {
        wx.showToast({ title: '网络请求失败', icon: 'none' });
      },
      complete: function () {
        wx.hideLoading();
      }
    });
  },

  /**
   * 【新增】处理搜索框输入事件的函数
   */
  onSearchInput: function(event) {
    // 1. 获取用户输入的关键词，并去掉首尾空格
    const query = event.detail.value.trim();

    // 2. 更新 data 中的 searchQuery，让输入框内容受控
    this.setData({
      searchQuery: query
    });

    // 3. 如果输入为空，则直接显示完整的列表
    if (!query) {
      this.setData({
        categories: this.allCategories
      });
      return;
    }

    // 4. 如果有输入，则开始筛选
    // 将关键词转为小写，以便进行不区分大小写的匹配
    const lowerCaseQuery = query.toLowerCase();
    
    // 使用 filter 方法从【完整列表 allCategories】中筛选
    const filteredCategories = this.allCategories.filter(category => {
      // 将每个品类的名称也转为小写进行比较
      const lowerCaseName = category.name.toLowerCase();
      // 如果名称中包含了搜索关键词，则返回 true
      return lowerCaseName.includes(lowerCaseQuery);
    });

    // 5. 将筛选后的结果更新到页面
    this.setData({
      categories: filteredCategories
    });
  },

  onPullDownRefresh: function () {
    // 下拉刷新时，清空搜索词并重新加载数据
    this.setData({ searchQuery: '' });
    this.getCategories();
    wx.stopPullDownRefresh();
  }
});